<template>
  <div class="custom-body" :style="borderStyle">
    <div v-if="showHeader" class="custom-left" :style="titleStyle">
      <div class="custom-header">
        <div class="custom-left-icon" :style="titleFont">
          <i :class="temp.lmtb" />
        </div>
        <div class="custom-left-title" :style="titleFont">
          <span class="title-span">{{ temp.lmmc }}</span>
        </div>
        <div
          v-if="temp.isMore === true"
          :style="titleFont"
          class="custom-more"
          @click="callBack"
        >
          更多
        </div>
      </div>
    </div>
    <el-empty
      v-if="dataList === null || dataList.length === 0"
      :image-size="100"
    />
    <div v-else class="custom-right" :style="customRight">
      <div
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        :style="liStyle"
        class="custom-right-li"
        @click="openEntity(item)"
      >
        <div
          class="right-content"
          :style="
            active === index
              ? activeStyle
              : { border: '1px solid ' + themes.bkys }
          "
          @mouseenter="openAlert(index)"
          @mouseleave="closeAlert(index)"
        >
          <div class="custom-li-image">
            <el-image lazy class="custom-image" :src="item[column['image']]" />
          </div>
          <div class="custom-li-title">
            <div class="custom-li-line-top">{{ item[column["title"]] }}</div>
            <div class="custom-li-line-bottom">
              {{
                item[column["left1"]] +
                  "/" +
                  item[column["left2"]] +
                  "/" +
                  item[column["left3"]]
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { template, openEntity } from '@/mixins/template';
export default {
  name: 'PcImageListTempV1',
  mixins: [template, openEntity],
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    },
    liStyle() {
      const width = (100 / this.column.row).toFixed(2);
      const height = (
        100 / Math.ceil(this.column.size / this.column.row)
      ).toFixed(2);
      return { width: width + '%', height: height + '%' };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        if (this.showHeader === true) {
          const pzx = JSON.parse(newData.data.pzx);
          this.setting = pzx;
          this.cid = newData.data.id;
          if (pzx.isRefresh !== undefined && pzx.isRefresh === true) {
            this.isRefresh = pzx.isRefresh;
          }
          if (pzx.refreshTime !== undefined && pzx.refreshTime !== null) {
            this.refreshTime = pzx.refreshTime;
          }
          this.column = pzx;
          this.initData();
        } else {
          const pzx = JSON.parse(newData.pzx);
          this.setting = pzx;
          if (pzx.isRefresh !== undefined && pzx.isRefresh === true) {
            this.isRefresh = pzx.isRefresh;
          }
          if (pzx.refreshTime !== undefined && pzx.refreshTime !== null) {
            this.refreshTime = pzx.refreshTime;
          }
          this.cid = newData.id;
          this.column = pzx;
          this.initData();
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.borderStyle.borderRadius = val.bkdx;
        if (this.temp.sfxsbk === true) {
          this.borderStyle.border = '1px solid ' + val.bkys;
        }
        if (this.temp.bkyy === true) {
          this.borderStyle.boxShadow = '0 2px 4px rgba(0, 0, 0, .12)';
        }
        this.borderStyle.background = val.columnGroundColor;
        this.borderStyle.color = val.fontColor;
        this.titleStyle.background = val.columnTitleGroundColor;
        this.titleStyle.color = val.columnTitleFontColor;
        this.activeStyle.color = val.changeFontColor;
        this.activeStyle.background = val.changeBackGroundColor;
        this.activeStyle.border = '1px solid ' + val.bkys;
        this.borderColumn.padding = '0px 10px';
        this.borderColumn.borderBottom = '1px solid ' + val.bkys;
        this.customRight = Object.assign({}, this.customRight);
        this.borderColumn = Object.assign({}, this.borderColumn);
        this.activeStyle = Object.assign({}, this.activeStyle);
        this.titleStyle = Object.assign({}, this.titleStyle);
        this.borderStyle = Object.assign({}, this.borderStyle);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.custom-left {
  width: 100%;
  height: 40px;
  flex: 0 1 auto;
  padding: 0px 10px;
  box-sizing: border-box;
}
.custom-header {
  width: 100%;
  height: 41px;
  display: flex;
  flex-flow: row nowrap;
}
.custom-left-icon,
.custom-more {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  flex: 0 1 auto;
}
.custom-left-title {
  height: 40px;
  line-height: 40px;
  text-align: left;
  flex: 1 1 auto;
}
.title-span {
  height: 40px;
  padding: 12px 5px;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  position: relative;
}
.title-span::before {
  position: absolute;
  content: "";
  height: 2px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.custom-right {
  flex: 1 1 auto;
  width: 100%;
}
.custom-right-li {
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  height: 50%;
  float: left;
  position: relative;
  border-radius: 4px;
}
.custom-li-image {
  width: 60px;
  height: 100%;
  text-align: center;
  flex: 0 1 auto;
}
.custom-image {
  height: 50px;
  top: 50%;
  margin-top: -25px;
}
.right-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  padding: 0px 10px;
  border-radius: 4px;
  box-sizing: border-box;
}
.custom-li-title {
  flex: 1 1 auto;
  height: 100%;
  padding: 10px 5px;
  box-sizing: border-box;
  position: relative;
}
.custom-li-line-top {
  position: absolute;
  width: 100%;
  line-height: 18px;
  top: 15px;
  left: 0px;
  right: 0px;
}
.custom-li-line-bottom {
  position: absolute;
  bottom: 15px;
  height: 20px;
  left: 0px;
  right: 0px;
  width: 100%;
  font-size: 12px;
}
</style>
